<template>
  <div class="addLogo-container">
    <el-drawer title="添加Logo" :visible.sync="drawer" :direction="direction" :wrapperClosable="false">
      <br />
      <el-form ref="logoForm" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="Logo名称" prop="logoName">
          <el-input v-model="form.logoName" placeholder="请输入logo名称"></el-input>
        </el-form-item>
        <br />
        <el-form-item label="logo上传">
          <el-upload class="avatar-uploader" action="" :show-file-list="false" :multiple="false" :http-request="uploadLogoImg" :before-upload="beforeAvatarUpload" accept="image/png, image/jpeg, image/jpg">
            <img v-if="form.fileUrl" :src="form.fileUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div class="el-drawer-footer">
        <el-button size="small" @click="drawer = false">取 消</el-button>
        <el-button size="small" type="primary"  @click="submitForm">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import { fileUpload } from '@/api/upload'
  import { logoUpdate, logoInfo, logoAdd } from '@/api/logo'
  export default {
    data() {
      return {
        drawer: false, // 显示与关闭
        direction: 'rtl', // 打开方向

        logoId:null,
        form: {
          fileId:'',
          logoName: '',
          fileUrl:'',
        },
        rules:{
          logoName: [{
            required: true,
            message: '请输入Logo名称',
            trigger: 'blur'
          }],
        },
      }
    },
    methods: {
      async loadLogoInfo(logoId){
        var res = await logoInfo(logoId);
        this.form.logoName = res.data.logoName;
        this.form.fileUrl = res.data.fileUrl;
      },

      //上传logo图片
      async uploadLogoImg(data){
        var formData = new FormData();
        formData.append('file', data.file);
        formData.append('fileName', data.file.name);
        formData.append('type',1);
        var res=await fileUpload(formData);
        this.form.fileUrl=res.data.url;
        this.form.fileId=res.data.fileId;
      },

      async addLogo() {
        var params = {
           fileId: this.form.fileId,
           logoName: this.form.logoName,
           fileUrl: this.form.fileUrl
         };
        var res = await logoAdd(params);
        return res;
      },

      async logoUpdate() {
       var params = {
          fileId: this.form.fileId,
          logoName: this.form.logoName,
          fileUrl: this.form.fileUrl,
          logoId: this.logoId
        };
        var res = await logoUpdate(params);
        return res;
      },

      close() {
        this.drawer = false;
        this.resetForm();
      },

      open(logoId) {
        this.resetForm();
        this.form.fileId = '';
        this.form.logoName = '';
        this.form.fileUrl = '';
        this.drawer = true;
        if(logoId){
          this.logoId = logoId;
          this.loadLogoInfo(logoId);
        }
      },

      submitForm() {
        this.$refs.logoForm.validate(async valid => {
          if (!valid) return false;
          var res;
          if(this.logoId){
            res=await this.logoUpdate();
          }else{
            res=await this.addLogo();
          }
          this.$utils.showSuccessMessage(res.msg,()=>{
            this.close();
            this.$parent.loadLogoList();
          });
        })
      },

      resetForm() {
        if (this.$refs.logoForm !== undefined) {
          this.$refs.logoForm.resetFields();
        }
      },

      // 限制图片大小
      beforeAvatarUpload(file) {
        if(file.size / 1024 > 500) {
          this.$message.error('图片不能超过500K')
          return false
        }
        return true
      }
    }
  }
</script>

<style scoped lang="scss">
  /deep/.el-drawer__body {
      height: calc(100% - 55px) !important;
      overflow-y: auto;
      padding: 5px;
      border-top: #DDDDDD 1px solid;
      margin-bottom: 62px;
      border-bottom: #DDDDDD 1px solid;
  }
  // logo上传
  /deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  .avatar {
    width: 150px;
    height: 150px;
    display: block;
  }
  .el-drawer-footer {
    width: 100%;
    text-align: right;
    padding: 15px 20px;
    background-color: white;
    position: absolute;
    bottom: 0;
  }
</style>
